<template>
  <div>
    <div
      :id="otherData.id"
      :style="{
        width: width,
        height: '50px',
      }"
    ></div>
  </div>
</template>
<script>
// 基本模板
let echarts = require("echarts/lib/echarts");
// 柱状图
require("echarts/lib/chart/bar");
// toolTip提示框 和 title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  data() {
    return {
      flag: false,
      getRole: localStorage.getItem("role"),
      barData: [],
    };
  },
  props: ["data", "ID", "toolTips", "otherData"],
  watch: {
    data(newVal, oldVal) {
      this.barData = newVal;
      this.drawBar(newVal, this.otherData.id, this.otherData.toolTips);
    },
  },
  computed: {
    width() {
      return this.homePower ? "5vw" : "9vw";
    },
  },
  mounted() {
    this.drawBar(this.getData, this.otherData.id, this.otherData.toolTips);
  },
  methods: {
    drawBar(data, id, name) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          formatter(parmas) {
            let { seriesName, data } = parmas;
            return `${seriesName}<br/>
                    ${data.text.substr(5, 5)}: ${data.value}`;
          },
        },
        xAxis: {
          data: new Array(data && data.length),
        },
        yAxis: {},
        series: [
          {
            name: name,
            type: "bar",
            data: data,
          },
        ],
        grid: {
          x: "0%",
          y: 49,
          x2: "0%",
          y2: 50,
        },
      });
      myChart.on("click", function (params) {
        console.log("params", params);
      });
    },
  },
};
</script>
<style lang='css' scoped>
body {
}
</style>
